在一般JavaScript中，若要使用innerHTML同時插入標籤、文字、圖片、連結，需要使用很多的 '字串' 和 + 變數名稱 相連結，不過如果同時要插入很多，使用這樣的方式太麻煩，而且容易少打或多打''、+符號以至於增加bug產生的機率。

在ECMAScript 6中可以使用重音符包住整個要插入的innerHTML內容，遇到要帶入變數名稱的部分改以錢字號 $變數來取代，讓程式碼寫起來更簡易乾淨，且比較不會打錯。

<範例>
若是希望能讓網頁顯示出這樣的頁面結果，圖片跟標題的部分可以使用innerHTML動態的插入。

之前JavaScript的組字串寫法：

    <ul class='list'>
    </ul>
    <script>
        const list = document.querySelector('.list');
        const imgurl = '1.jpg';
        const title = '我的水果家族';

        list.innerHTML = '<li><h2>' + title + '</h2><img src="' + imgurl + '" height="100px"></li>';
    </script>

ECMAScript 6的輕鬆組字串寫法：

    <ul class='list'>
    </ul>

    <script>
        const list = document.querySelector('.list');
        const imgurl = '1.jpg';
        const title = '我的水果家族';

        list.innerHTML =`<li><h2>${title}</h2><img src="${imgurl}" height='100px'></li>`;
    </script>

雖然新的寫法簡易很多，不過innerHTML若是要同時帶入多個標籤時，落落長的一大串，閱讀起來很困難，所以建議在輸入的時候，能使用斷行，將各個標籤分開打，會更清楚明瞭：

        list.innerHTML =
            `<li>
            <h2>${title}</h2>
            <img src="${imgurl}" height='100px'>
            </li>`;

資料參考來源：Hex School